<template>
  <div class="pay-list">
    <header class="header">
      <img src="../../images/pay/geling_vip_h.png" class="header-img vam">
      <div class="pl20">提示：下面各个APP的会员互不通用哦~</div>
    </header>
    <div class="types clearfix" v-for="(types, i) in appList" :key="i">
      <div class="title">
        <div class="gl-title">{{types.title}}</div>
      </div>
      <div class="list">
        <div class="item por" v-for="(item, k) in types.list" :key="k">
          <img :src="item.icon" class="ico fl vam">
          <div class="name vam">{{item.name}}</div>
          <div class="btn abs-m tac vam" @click="toPay(item)">购买会员</div>
          <div class="line poa r0 b0"></div>
        </div>
      </div>
    </div>
    <div class="privilege clearfix">
      <div class="title tac">VIP专属特权</div>
      <div class="item bsb" v-for="(item, j) in privileges" :key="j">
        <div class="ico fl h100 vam" :style="{backgroundImage: `url(${item.img})`}"></div>
        <div class="name">{{item.name}}</div>
        <div class="desc">{{item.desc}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapMutations, mapGetters } from 'vuex';

  export default {
    name: 'PayVipList',
    data() {
      return {
        // 特权列表
        privileges: [
          { name: '海量课程', img: require('../../images/pay/ico_course.png'), desc: '可观看APP内所有课程' },
          { name: '无限播放', img: require('../../images/pay/ico_wuxian.png'), desc: '所有课程不限次数播放' },
          { name: '手机会员', img: require('../../images/pay/ico_phone.png'), desc: '手机端同享会员权益' },
          { name: '平板会员', img: require('../../images/pay/ico_pad.png'), desc: '平板端同享会员权益' },
          { name: '电视会员', img: require('../../images/pay/ico_TV.png'), desc: '电视端同享会员权益' }
        ]
      };
    },
    computed: {
      ...mapGetters([
        'appList'
      ])
    },
    methods: {
      ...mapMutations([]),
      toPay(item, type = 'push') {
        this.$router[type]({
          name: 'PayVip',
          params: {
            id: item.pid
          },
          query: item.query || {}
        });
      }
    },
    created() {
    }
  };
</script>

<style scoped lang="less">
  .pay-list {
    background-color: #eee;
    .header {
      background-color: #fff;
      line-height: 2;
      color: #f00;
      font-size: .84rem;
    }
    .header-img {
      width: 100%;
      height: 6.56rem;
    }
    .types {
      background-color: #fff;
      font-size: 1rem;
      .title {
        padding: 1.22rem 0;
        border-bottom: .06rem solid #eee;
      }
      & + .types {
        margin-top: .63rem;
      }
    }
    .list {
      .item {
        padding: .94rem .75rem;
        line-height: 3.13rem;
        color: #333;
        &:last-child {
          .line {
            display: none;
          }
        }
      }
      .ico {
        margin-right: .7rem;
        width: 3.13rem;
        height: 3.13rem;
      }
      .btn {
        right: .75rem;
        width: 5rem;
        height: 1.88rem;
        line-height: 1.88rem;
        background-color: #edf6ff;
        border-radius: 1.88rem;
        border: solid .06rem #0f82ff;
        font-size: .88rem;
        color: #0f82ff;
      }
      .line {
        margin: auto;
        left: 4.5rem;
        height: .06rem;
        background-color: #eee;
      }
    }
    .privilege {
      padding: 0 .75rem 1.25rem;
      .title {
        margin: 1.19rem 0;
        font-size: 1.13rem;
        color: #333;
      }
      .item {
        padding: .66rem 0;
        height: 4.06rem;
        line-height: 1.5rem;
        font-size: .81rem;
        color: #999;
        background-color: #fff;
        & + .item {
          margin-top: .63rem;
        }
      }
      .ico {
        width: 4.9rem;
        background: no-repeat center center / 2.38rem;
      }
      .name {
        font-size: 1rem;
        color: #444;
      }
    }
  }
</style>
